<template>
  <view class="menu-botton" :class="{active: item.status}" @click="onClickMenu">
    <view class="btn-box">
      <view class="progress"></view>
      <view class="btn">
        <view class="bg">
          <image class="icon" :src="`https://files.yzsheng.com/client/selfwash/${item.icon}${item.status ? '_1' : ''}.png`"></image>
        </view>
      </view>
    </view>
    <view class="text"><text>{{item.title}}{{item.status ? '暂停' : '开始'}}</text></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  props: {
    index: {
      type: [String, Number],
      default: ''
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    item() {}
  },
  created() {
    uni.getImageInfo({
      src: `https://files.yzsheng.com/client/selfwash/${this.item.icon}_1.png`,
      success: () => {
      }
    });
  },
  methods: {
    onClickMenu() {
      this.$emit('click', this.index)
    }
  }
}
</script>

<style lang="scss">
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-botton{
  width: 168rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  position: relative;
  .btn-box{
    width: 138rpx;
    height: 138rpx;
    background-image: url('https://files.yzsheng.com/client/selfwash/btn_bg.png');
    background-size: 100% 100%;
    @extend .flex-center;
  }
  .progress{
    width: 118rpx;
    height: 118rpx;
    background-image: url('https://files.yzsheng.com/client/selfwash/progress.png');
    background-size: 100% 100%;
    margin-top: -2rpx;
    display: none;
  }
  .btn{
    width: 130rpx;
    height: 130rpx;
    background-image: url('https://files.yzsheng.com/client/selfwash/zhong.png');
    background-size: 100% 100%;
    position: absolute;
    @extend .flex-center;
    .bg{
      width: 100rpx;
      height: 100rpx;
      transition: all .1s;
      @extend .flex-center;
      .icon{
        width: 70rpx;
        height: 70rpx;
        transition: all .1s;
      }
    }
  }
  .text{
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #977D0D;
    text-align: center;
  }
  &.active{
    .progress{
      display: block;
      animation: rotateProgress 3s linear infinite;
    }
    .btn{
      .bg{
        width: 64rpx;
        height: 64rpx;
        background-image: url('https://files.yzsheng.com/client/selfwash/button.png');
        background-size: 100% 100%;
        .icon{
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
}
@keyframes rotateProgress{
  0%{
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
